<style scoped lang="less">
	.container {
		min-height: 100%;
		.vuxdashabi{
			text-align: right;
			display: block;
		}
	}
	
	.weui-cells {
		font-size: 12px;
	}
	.sexbox{
		background: #FFF;
		flex: 1 1 auto;
		height: 100%;
		display: flex;
		flex-flow: column nowrap;
		text-align: center;
		a{
			flex: 1 1 auto;
			height: 40px;
			line-height: 40px;
		}
	}
</style>
<template>
	<div class="container">
		<loading :show="isLoading" text="请稍候"></loading>
		<x-header title="个人信息"></x-header>
		<group label-margin-right="10px" gutter="0" label-align="right">
			<x-input text-align="right" title="昵称" v-model="userInfo.nickname"></x-input>
			<cell value-align="left" style="padding-left:32px;" title="性别"  @click.native="vuex_is_sb" is-link>
				<span class="vuxdashabi">{{ sexval }}</span>
				
			</cell>
			<datetime v-model="userInfo.birthday" title="生日" style="padding-left:32px;"></datetime>
			<x-input text-align="right" title="手机号码" type="tel" v-model="userInfo.mobile"></x-input>
			<!-- <x-input text-align="right" title="修改密码" v-model="passval"></x-input> -->
		</group>
		<div v-transfer-dom>
			<popup v-model="showPopup" position="bottom" height="20%">
				<div class="sexbox">
					<a class="vux-1px-b" @click="sexint('男')">男</a>
					<a class="vux-1px-b" @click="sexint('女')">女</a>
					<a @click="sexint('保密')">保密</a>
				</div>
			</popup>
		</div>
		<!-- <x-button type="primary" action-type="button" @click="editUser()">确认修改</x-button> -->
	</div>


	
</template>
<script>
	import { getUserInfo } from '@/api/index'
	import {
		XHeader,
		Group,
		XInput,
		Datetime,
		TransferDom,
		Popup,
		Cell,
		Loading,
		XButton
	} from 'vux'
	export default {
		name: 'query',
		directives: {
			TransferDom
		},
		components: {
			XHeader,
			Group,
			XInput,
			Datetime,
			Popup,
			Cell,
			Loading,
			XButton
		},
		data() {
			return {
				nameval: '',
				sexval: '',
				birthval: '',
				telval: '',
				passval: '',
				showPopup: false,
				isLoading: false,
				userInfo: {}
			}
		},

		mounted() {
			this.getUserInfo()
		},
		methods: {
			vuex_is_sb() {
				this.showPopup = true;
			},
			sexint(int){
				this.sexval = int;
				this.showPopup = false;
			},
			// 获取个人资料信息
			getUserInfo() {
				this.isLoading = true
				getUserInfo().then(response => {
					this.userInfo = response.user
					this.sexval = this.userInfo.sex
					this.isLoading = false
				})
			},
			// 编辑个人信息
			editUser() {
				this.userInfo.sex = this.sexval == '男' ? 1 : '女'
				editUser(this.userInfo).then(response => {
					
				})
			}
		},

	}
</script>